<script lang="ts" setup>
import { ref, reactive, nextTick, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const emit = defineEmits(['updateShopCollect']);



import reqApis from '../../../req/reqApis.js';

const router = useRouter();

const props = defineProps({
  shop: {
    type:Object
  },
  shopCollectBool: {
    type: Boolean,
    default: false
  }
});


const currentData = ref<any>({
  logo: new URL("../../../assets/images/login-icon-1.jpg", import.meta.url)
});

const changeSopCollect = () => {
  emit("updateShopCollect", {bool:props.shopCollectBool, shopId: props.shop.shopId});
}

const toShop = () => {
  router.push({path: "/shopDetail", query: {shopId: props.shop.shopId}});
};
</script>
<template>
  <section class="productShopUtil">
    <div class="title-wrap">
      <div class="logo" :style="{background: `url(${props.shop.shopLogo}) no-repeat center`}"></div>
      <div class="content">
        <div class="name">{{props.shop.shopName}}</div>
        <div class="desc">{{props.shop.shopDesc}}</div>
      </div>
      
    </div>
    <div class="content-nav">
      <div class="item">
        <div class="num">{{props.shop.fansNum}}</div>
        <div class="text">粉丝人数</div>
      </div>
      <div class="item">
        <div class="num">{{props.shop.productNum}}</div>
        <div class="text">全部商品</div>
      </div>
      <div class="item">
        <div class="num">{{props.shop.browseNum}}</div>
        <div class="text">浏览人数</div>
      </div>
      <div class="item">
        <div class="num">{{props.shop.shopGrade}}</div>
        <div class="text">综合评分</div>
      </div>
    </div>
    <div class="btn-wrap">
      <div class="btn" @click="changeSopCollect()"><i class="follow-icon" :class="{'active': props.shopCollectBool}"></i>关注店铺</div>
      <div class="btn" @click="toShop()"><i class="shop-icon"></i>进入店铺</div>
    </div>
  </section>
</template>

<style lang="less" scoped>
.productShopUtil {
  padding: .1rem;
  background: white;
  margin-bottom: .1rem;
  .title-wrap {
    // height: .3rem;
    display: flex;
    margin-bottom: .1rem;
    .logo {
      width: .9rem;
      height: .9rem;
      background-size: cover !important;
      position: relative;
      margin-right: .1rem;
      &::after {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: "";
        border: 0.01rem solid #ddd;
      }
    }
    .name {
      height: .3rem;
      line-height: .3rem;
      font-size: .18rem;
      color: #333;
    }
    .desc {
      line-height: 0.17rem;
      padding: 0 0.05rem;
      box-sizing: border-box;
      color: #232326;
      font-size: 0.14rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }
  .content-nav {
    display: flex;
    padding-bottom: .1rem;
    .item {
      flex: 1;
      .num {
        text-align: center;
        font-size: .14rem;
        padding-bottom: 0.05rem;
      }
      .text {
        font-size: .12rem;
        text-align: center;
      }
    }

  }
  .btn-wrap {
    display: flex;
    justify-content: center;
    .btn {
      width: 1.72rem;
      height: .3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .12rem;
      color: #333;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: .01rem solid #ddd;
      }
      .follow-icon {
        width: .15rem;
        height: .13rem;
        background: url("../../../assets/images/cart-icon-6.png") no-repeat;
        background-size: .7rem .7rem;
        background-position: -0.35rem -0.01rem;
        margin-right: .05rem;
        &.active {
          background-position: -0.35rem -0.17rem;
        }
      }
    }
  }
}
</style>

